<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Homepage</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Add custom CSS here -->
    <link href="css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">

</head>

<body>

<div id="wrapper">

<!-- Sidebar -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <!-- Brand and toggle get grouped for better mobile display -->
    <button class="btn-style" style="float: right;">
        New Event
    </button>
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"
                id="button-toggle">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="index.html">my9time</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse navbar-ex1-collapse" id="sidebar">
        <div id="header">

            <div class="top">
                <!-- noti -->
                <div class="noti">
                    <a class="event-request-icon">
                        <div class="count">22</div>
                    </a>

                    <div class="event-request-item">
                        <ul class="root">
                            <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                            </a></li>
                            <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification Demo notification Demo notification Demo notification Demo<br/>
                <i class="noti-date">10 min ago</i></span>
                            </a></li>
                            <li><a href="#">
                        <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                              alt=""/></span>

                <span class="noti-body">
                    <b class="user-name">thnonl</b>
                    Demo notification<br/>
                <i class="noti-date">10 min ago</i></span>
                            </a></li>

                        </ul>
                    </div>


                    <a class="friend-request-icon">
                        <div class="count">1</div>
                    </a>

                    <div class="friend-request-item">
                        <ul class="root">
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b> have kicked your shelf.<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                        </ul>
                    </div>
                    <a class="message-icon">
                        <div class="count">10</div>
                    </a>

                    <div class="message-item">
                        <ul class="root">
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                        </ul>
                    </div>
                    <a class="noti-icon">
                        <div class="count">99</div>
                    </a>

                    <div class="notification-item">
                        <ul class="root">
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                            <li><a href="#"> <span class="image avatar-micro"><img src="images/avatar.jpg"
                                                                                   alt=""/></span> <span
                                    class="noti-body">                     <b class="user-name">thnonl</b>                     Demo notification Demo notification Demo notification Demo notification Demo<br/>                 <i
                                    class="noti-date">10 min ago</i></span> </a></li>
                        </ul>
                    </div>
                </div>
                <!-- avatar-header -->
                <div id="avatar-header">
                    <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                    <h1 id="user-name">thnonl</h1>
                    <span class="byline">Thái Hoàng Nam</span>
                </div>

                <!-- Nav -->

                <ul class="nav navbar-nav">
                    <li class="active"><a href="#" id="top-link">Home<i class="fa fa-home"></i></a>
                    </li>
                    <li><a href="#">Message<i
                            class="fa fa-envelope"></i></a></li>
                    <li><a href="#">My Timeshelf<i class="fa fa-user"></i></a>
                    </li>
                    <li><a href="#">Event Calendar<i class="fa fa-th"></i></a>
                    </li>
                </ul>


                <!-- Recent Event -->
                <div id="recent-event"><p style="text-align: left; font-size: 0.8em; margin-left: 40px;">Recent
                    Events</p>

                    <div class="item">
                        <a href="#"><span>Halloween</span></a>
                        <a href="#"><span>Va lung tung</span></a>
                        <a href="#"><span>Giữa thu</span></a>
                        <a href="#"><span>Giáng xinh</span></a>
                        <a href="#"><span>Xin nhựt</span></a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- /.navbar-collapse -->
</nav>

<div id="page-wrapper">

    <!-- Todo list -->
    <div class="tdl-spmenu tdl-spmenu-vertical tdl-spmenu-right" id="tdl-spmenu-s2">
        <div id="btn"></div>
        <div class="to-do-list"><h1>Every day</h1>
            <ul class="to-do-item">

                <li><input type="checkbox" id="everyday-1" checked/>
                    <label for="everyday-1">Ăn sáng</label></li>

                <li><input type="checkbox" id="everyday-2"/><label for="everyday-2">Đánh nhau</label></li>
                <li><input type="checkbox" id="everyday-3" checked/><label for="everyday-3">Chơi gêm</label></li>
                <li><input type="checkbox" id="everyday-4" checked/><label for="everyday-4">Ăn tối</label></li>
                <li><input type="checkbox" id="everyday-5"/><label for="everyday-5">Chat đêm</label></li>
            </ul>
        </div>
    </div>

    <!-- Message -->
    <div class="row">
        <div id="message">

            <!-- Friend list -->
            <div class="col-md-4">
                <h1>Friend List</h1>

                <div id="m-friends">
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>
                    <div class="m-f-item">
                        <span class="image avatar-large"><img src="images/avatar.jpg" alt=""/></span>

                        <h1>thnonl</h1>
                        <span class="byline">last message</span>
                    </div>


                </div>

            </div>

            <!-- Conversation -->
            <div class="col-md-8">
                <h1>Messages</h1>

                <div id="m-conversations">
                    <div class="m-c-item-me">
                        <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>
                        <span class="byline">
                            <i class="time">9pm 21/1/2014</i><p>alo 123</p>
                            <i class="time">9:10pm 21/1/2014</i><p>hello cai bo</p>
                        </span>
                    </div>

                    <div class="m-c-item-you">
                        <span class="image avatar-small"><img src="images/avatar.jpg" alt=""/></span>
                        <span class="byline">
                            <i class="time">10pm 21/1/2014</i><p>alo 123</p>
                            <i class="time">11pm 21/1/2014</i><p>hello cai bo</p>
                            <i class="time">12pm 21/1/2014</i><p>Jean Paul Gaultier nổi tiếng với việc sử dụng những
                            người mẫu độc nhất vô nhị mang đủ mọi vóc dáng, kích thước và tuổi tác trong các show diễn
                            của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                            Jean Paul Gaultier nổi tiếng với việc sử dụng những người mẫu độc nhất vô nhị mang đủ mọi
                            vóc dáng, kích thước và tuổi tác trong các show diễn của mình.
                        </p>
                        </span>
                    </div>
                </div>
            </div>

            <!-- Enter Text -->
            <div class="col-md-8" id="m-chat">
                <div class="new-textarea">
                    <textarea placeholder="Write a text..."></textarea>
                    <button class="btn-style textarea-btn">Send</button>
                </div>
            </div>

        </div>
    </div>
    <!-- /.row -->

</div>
<!-- /#page-wrapper -->

</div>
<!-- /#wrapper -->

<!-- JavaScript -->
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.js"></script>

<!-- Page Specific Plugins -->
<script src="js/classie.js"></script>
<script type="text/javascript" src="js/jquery.scroll-follow.js"></script>
<script type="text/javascript" src="js/todo.js"></script>
<script src="js/notification.js"></script>
</body>
</html>
